<!--
  @文件名： headerCom
  @来源：YongPing.Wang|2023/11/19 15:35
  @描述：
-->
<template>
  <div class="headerCom LG-wh100" :style="{ color: `var(${colorHeader})` }">
    <div class="left">
      <!--      <div class="breadcrumb">-->
      <!--        <el-breadcrumb separator="/">-->
      <!--          <el-breadcrumb-item to="/">{{ $t('LG.menuModel.homePage') }}</el-breadcrumb-item>-->
      <!--          <el-breadcrumb-item>{{ routerName }}</el-breadcrumb-item>-->
      <!--        </el-breadcrumb>-->
      <!--      </div>-->
    </div>
    <div class="right LG-h100">
      <!--设置-->
      <div class="settingInfo" @click="setConfigHandle">
        <el-tooltip effect="dark" :content="$t(`LG.baseModel.systemConfig`)" placement="bottom">
          <el-icon><Setting /></el-icon>
        </el-tooltip>
      </div>
      <!--文档-->
      <div class="docInfo" @click="routerDocHandle">
        <el-tooltip effect="dark" :content="$t(`LG.baseModel.systemDocument`)" placement="bottom">
          <el-icon><Document /></el-icon>
        </el-tooltip>
      </div>
      <!--语言-->
      <el-dropdown class="LG-h100">
        <div class="langinfo LG-h100" :style="{ color: `var(${colorHeader})` }">
          <svg-icon name="guojihua" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :disabled="item.disable" :class="storeLayoutInfo.localeConfig === item.value && 'custom-active'" v-for="item in langTypeList" :key="item.value" @click="switchLang(item.value)">
              {{ $t(`LG.baseModel.${item.value}`) }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!--下拉-->
      <el-dropdown class="LG-h100">
        <div class="userinfo LG-h100" :style="{ color: `var(${colorHeader})` }">
          <el-avatar :src="circleUrl">
            <el-icon><UserFilled /></el-icon>
          </el-avatar>
          <div class="title LG-nowrap-one">{{ userInfoStore.nickname || '--' }}</div>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="updatepassword">{{ $t('LG.baseModel.changePassword') }}</el-dropdown-item>
            <el-dropdown-item @click="logOutHandle">{{ $t('LG.baseModel.logOutLogin') }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 修改密码弹窗 -->
    <update-password-dialog ref="updatePasswordDialogRef"></update-password-dialog>
  </div>
</template>

<script setup lang="ts">
  import { Document, Setting, UserFilled } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  import { userInfo } from '@/store/userInfo.ts'
  import { useRouter } from 'vue-router'
  import SvgIcon from '@/components/svgIcon/svgIcon.vue'
  import type { ELangType } from '@/lang/types.ts'
  import { layoutInfo } from '@/store/layoutInfo.ts'
  import { langTypeList } from '@/lang/constants.ts'
  import { ElMessageBox } from 'element-plus'
  import updatePasswordDialog from '@/viewBase/userModel/components/updatePasswordDialog.vue'
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()

  defineProps({
    colorHeader: {
      type: String,
      default: '--LG-layout-header-color1',
    },
  })

  const router = useRouter()
  const storeLayoutInfo = layoutInfo()
  const userInfoStore = userInfo()
  const circleUrl = ref()

  // 修改密码
  const updatePasswordDialogRef = ref()
  const updatepassword = (): void => {
    updatePasswordDialogRef.value?.switchDialog(true, {
      oldPwd: '',
      newPwd: '',
      repeatPwd: '',
    })
  }
  // 退出登录
  const logOutHandle = (): void => {
    ElMessageBox.confirm(t('LG.baseModel.DoYouConfirmExit'), t('LG.baseModel.logOutLogin'), { type: 'warning' })
      .then(() => {
        void userInfoStore.userLogout().then(() => {
          void router.replace('/')
        })
      })
      .catch(() => {})
  }
  // 切换语言
  const switchLang = (type: ELangType): void => {
    storeLayoutInfo.setLocaleConfig(type)
  }
  // 去文档
  const routerDocHandle = (): void => {
    const url: any = router.resolve({
      path: '/docs',
    }).href
    window.open(url + '/index.html#/README', '_blank')
  }
  // 切换配置
  const setConfigHandle = (): void => {
    storeLayoutInfo.setPlatformConfigOpen(true)
  }
</script>

<style scoped lang="scss">
  .headerCom {
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    align-items: center;
    box-shadow: var(--el-box-shadow-lighter);
    ::v-deep(.el-avatar) {
      width: 38px;
      height: 38px;
    }
    .left {
      .breadcrumb {
        padding-left: 10px;
        ::v-deep(.el-breadcrumb__inner) {
          color: unset;
        }
      }
    }
    .right {
      display: flex;
      .userinfo {
        display: flex;
        align-items: center;
        padding-left: 10px;
        cursor: pointer;
        .title {
          max-width: 100px;
          padding-left: 5px;
        }
      }
      .langinfo {
        display: flex;
        align-items: center;
        padding: 0 10px;
        cursor: pointer;
        font-size: 20px;
      }
      .docInfo,
      .settingInfo {
        display: flex;
        align-items: center;
        padding: 0 10px;
        cursor: pointer;
        font-size: 20px;
      }
      .userinfo:hover,
      .docInfo:hover,
      .langinfo:hover,
      .settingInfo:hover {
        background-color: rgba(206, 203, 203, 0.2);
      }
    }
  }
</style>
